<template>
  <view class="file-tool-demo">
    <!-- 导航栏 -->
    <xl-nav-bar title="文件工具" />
    
    <!-- 组件展示区 -->
    <view class="component-section">
      <xl-file-tool ref="fileToolRef">
        <view class="tool-header">
          <text class="tool-title">文件处理工具箱</text>
          <text class="tool-subtitle">支持文件压缩、解压、图片转换和上传</text>
        </view>
        
        <!-- 功能选项卡 -->
        <view class="tool-tabs">
          <view 
            v-for="(tab, index) in tabs" 
            :key="index" 
            class="tab-item" 
            :class="{ 'active': currentTab === index }"
            @click="switchTab(index)"
          >
            <text class="tab-icon">{{ tab.icon }}</text>
            <text class="tab-name">{{ tab.name }}</text>
          </view>
        </view>
        
        <!-- 压缩/解压功能 -->
        <view class="tool-content" v-if="currentTab === 0">
          <view class="section-title">
            <text class="title-icon">📦</text>
            <text>文件压缩/解压</text>
          </view>
          
          <view class="file-selector">
            <button class="select-btn" @click="selectFile('compress')">
              <text class="btn-icon">📁</text>
              <text>选择文件</text>
            </button>
            <text class="file-name">{{ compressFileName || '未选择文件' }}</text>
          </view>
          
          <view class="compress-options" v-if="compressFileName">
            <view class="option-item">
              <text class="option-label">压缩格式</text>
              <picker 
                :value="compressFormatIndex" 
                :range="compressFormats" 
                @change="onCompressFormatChange"
              >
                <view class="picker-value">{{ compressFormats[compressFormatIndex] }}</view>
              </picker>
            </view>
            
            <view class="option-item">
              <text class="option-label">压缩级别</text>
              <slider 
                :value="compressLevel" 
                min="1" 
                max="9" 
                show-value 
                @change="onCompressLevelChange" 
              />
            </view>
          </view>
          
          <view class="action-buttons">
            <button 
              class="action-btn compress-btn" 
              :disabled="!compressFileName || isProcessing" 
              @click="compressFile"
            >
              {{ isProcessing ? '压缩中...' : '压缩文件' }}
            </button>
            <button 
              class="action-btn extract-btn" 
              :disabled="!compressFileName || isProcessing" 
              @click="extractFile"
            >
              {{ isProcessing ? '解压中...' : '解压文件' }}
            </button>
          </view>
          
          <!-- 文件列表 -->
          <view class="file-list" v-if="processedFiles.length > 0">
            <view class="list-header">
              <text class="list-title">处理记录</text>
              <text class="list-clear" @click="clearProcessedFiles">清空</text>
            </view>
            <view class="list-content">
              <view 
                v-for="(file, index) in processedFiles" 
                :key="index" 
                class="file-item"
              >
                <view class="file-info">
                  <text class="file-icon">{{ getFileIcon(file.type) }}</text>
                  <view class="file-details">
                    <text class="file-name">{{ file.name }}</text>
                    <text class="file-meta">{{ file.type }} · {{ formatFileSize(file.size) }} · {{ formatDate(file.date) }}</text>
                  </view>
                </view>
                <view class="file-actions">
                  <button class="action-btn small-btn" @click="openFile(file)">
                    <text class="btn-icon">👁️</text>
                    <text>打开</text>
                  </button>
                  <button class="action-btn small-btn" @click="shareFile(file)">
                    <text class="btn-icon">📤</text>
                    <text>分享</text>
                  </button>
                  <button class="action-btn small-btn delete-btn" @click="deleteFile(index)">
                    <text class="btn-icon">🗑️</text>
                    <text>删除</text>
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 图片格式转换功能 -->
        <view class="tool-content" v-if="currentTab === 1">
          <view class="section-title">图片格式转换</view>
          
          <view class="file-selector">
            <button class="select-btn" @click="selectFile('image')">选择图片</button>
            <text class="file-name">{{ imageFileName || '未选择图片' }}</text>
          </view>
          
          <view class="image-preview" v-if="imageFileName">
            <image :src="imagePreviewUrl" mode="aspectFit" class="preview-image"></image>
          </view>
          
          <view class="image-options" v-if="imageFileName">
            <view class="option-item">
              <text class="option-label">目标格式</text>
              <picker 
                :value="imageFormatIndex" 
                :range="imageFormats" 
                @change="onImageFormatChange"
              >
                <view class="picker-value">{{ imageFormats[imageFormatIndex] }}</view>
              </picker>
            </view>
            
            <view class="option-item">
              <text class="option-label">质量</text>
              <slider 
                :value="imageQuality" 
                min="1" 
                max="100" 
                show-value 
                @change="onImageQualityChange" 
              />
            </view>
            
            <view class="option-item" v-if="imageFormats[imageFormatIndex] === 'WebP'">
              <text class="option-label">自动兼容</text>
              <switch :checked="autoCompatible" @change="onAutoCompatibleChange" />
            </view>
          </view>
          
          <view class="action-buttons">
            <button 
              class="action-btn convert-btn" 
              :disabled="!imageFileName || isProcessing" 
              @click="convertImage"
            >
              {{ isProcessing ? '转换中...' : '转换图片' }}
            </button>
          </view>
          
          <!-- 图片列表 -->
          <view class="file-list" v-if="processedImages.length > 0">
            <view class="list-header">
              <text class="list-title">转换记录</text>
              <text class="list-clear" @click="clearProcessedImages">清空</text>
            </view>
            <view class="list-content">
              <view 
                v-for="(image, index) in processedImages" 
                :key="index" 
                class="file-item"
              >
                <view class="file-info">
                  <image :src="image.path" mode="aspectFill" class="file-thumbnail"></image>
                  <view class="file-details">
                    <text class="file-name">{{ image.name }}</text>
                    <text class="file-type">{{ image.format }}</text>
                    <text class="file-size">{{ formatFileSize(image.size) }}</text>
                    <text class="file-date">{{ formatDate(image.date) }}</text>
                  </view>
                </view>
                <view class="file-actions">
                  <button class="action-btn small-btn" @click="openFile(image)">打开</button>
                  <button class="action-btn small-btn" @click="shareFile(image)">分享</button>
                  <button class="action-btn small-btn delete-btn" @click="deleteImage(index)">删除</button>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 文件上传功能 -->
        <view class="tool-content" v-if="currentTab === 2">
          <view class="section-title">文件上传</view>
          
          <view class="file-selector">
            <button class="select-btn" @click="selectFile('upload')">选择文件</button>
            <text class="file-name">{{ uploadFileName || '未选择文件' }}</text>
          </view>
          
          <view class="upload-options" v-if="uploadFileName">
            <view class="option-item">
              <text class="option-label">分片大小</text>
              <picker 
                :value="chunkSizeIndex" 
                :range="chunkSizes" 
                @change="onChunkSizeChange"
              >
                <view class="picker-value">{{ chunkSizes[chunkSizeIndex] }}</view>
              </picker>
            </view>
            
            <view class="option-item">
              <text class="option-label">并发上传数</text>
              <slider 
                :value="concurrentUploads" 
                min="1" 
                max="5" 
                show-value 
                @change="onConcurrentUploadsChange" 
              />
            </view>
            
            <view class="option-item">
              <text class="option-label">断点续传</text>
              <switch :checked="resumeUpload" @change="onResumeUploadChange" />
            </view>
          </view>
          
          <view class="upload-progress" v-if="isUploading">
            <view class="progress-info">
              <text>上传进度: {{ uploadProgress }}%</text>
              <text>已上传: {{ formatFileSize(uploadedSize) }} / {{ formatFileSize(totalSize) }}</text>
            </view>
            <progress :percent="uploadProgress" stroke-width="4" activeColor="#007aff" />
            
            <view class="chunk-progress" v-if="chunkProgress.length > 0">
              <view 
                v-for="(chunk, index) in chunkProgress" 
                :key="index" 
                class="chunk-item"
                :class="{ 'completed': chunk.status === 'completed', 'uploading': chunk.status === 'uploading', 'failed': chunk.status === 'failed' }"
              >
                <text>分片 {{ index + 1 }}</text>
                <text>{{ chunk.progress }}%</text>
              </view>
            </view>
          </view>
          
          <view class="action-buttons">
            <button 
              class="action-btn upload-btn" 
              :disabled="!uploadFileName || isUploading" 
              @click="startUpload"
            >
              {{ isUploading ? '上传中...' : '开始上传' }}
            </button>
            <button 
              class="action-btn pause-btn" 
              :disabled="!isUploading" 
              @click="pauseUpload"
            >
              {{ isPaused ? '继续上传' : '暂停上传' }}
            </button>
            <button 
              class="action-btn cancel-btn" 
              :disabled="!isUploading" 
              @click="cancelUpload"
            >
              取消上传
            </button>
          </view>
          
          <!-- 上传记录 -->
          <view class="file-list" v-if="uploadedFiles.length > 0">
            <view class="list-header">
              <text class="list-title">上传记录</text>
              <text class="list-clear" @click="clearUploadedFiles">清空</text>
            </view>
            <view class="list-content">
              <view 
                v-for="(file, index) in uploadedFiles" 
                :key="index" 
                class="file-item"
              >
                <view class="file-info">
                  <text class="file-name">{{ file.name }}</text>
                  <text class="file-url">{{ file.url }}</text>
                  <text class="file-size">{{ formatFileSize(file.size) }}</text>
                  <text class="file-date">{{ formatDate(file.date) }}</text>
                </view>
                <view class="file-actions">
                  <button class="action-btn small-btn" @click="copyUrl(file)">复制链接</button>
                  <button class="action-btn small-btn" @click="shareFile(file)">分享</button>
                  <button class="action-btn small-btn delete-btn" @click="deleteUploadedFile(index)">删除</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </xl-file-tool>
    </view>

    <!-- 使用说明 -->
    <view class="usage-section">
      <view class="section-title">使用说明</view>
      <view class="usage-content">
        <view class="usage-item">
          <text class="item-title">1. 文件压缩/解压</text>
          <text class="item-desc">支持ZIP、RAR、7Z等格式，可自定义压缩级别</text>
        </view>
        <view class="usage-item">
          <text class="item-title">2. 图片格式转换</text>
          <text class="item-desc">支持JPEG、PNG、WebP、GIF等格式互转</text>
        </view>
        <view class="usage-item">
          <text class="item-title">3. 大文件上传</text>
          <text class="item-desc">支持分片上传和断点续传，提高上传效率</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import XlFileTool from '@/components/xl-file-tool/index.vue';


const fileToolRef = ref(null);

// 状态变量
const currentTab = ref(0);
const isProcessing = ref(false);
const isUploading = ref(false);
const isPaused = ref(false);
const statusMessage = ref('');
const statusType = ref('info');

// 文件选择相关
const compressFileName = ref('');
const imageFileName = ref('');
const uploadFileName = ref('');
const imagePreviewUrl = ref('');

// 压缩相关
const compressFormatIndex = ref(0);
const compressFormats = ['ZIP', 'RAR', '7Z'];
const compressLevel = ref(6);

// 图片转换相关
const imageFormatIndex = ref(0);
const imageFormats = ['JPEG', 'PNG', 'WebP', 'GIF'];
const imageQuality = ref(80);
const autoCompatible = ref(true);

// 上传相关
const chunkSizeIndex = ref(1);
const chunkSizes = ['1MB', '5MB', '10MB', '20MB', '50MB'];
const concurrentUploads = ref(3);
const resumeUpload = ref(true);
const uploadProgress = ref(0);
const uploadedSize = ref(0);
const totalSize = ref(0);
const chunkProgress = ref([]);

// 处理记录
const processedFiles = ref([]);
const processedImages = ref([]);
const uploadedFiles = ref([]);

// 选项卡
const tabs = [
  { name: '压缩/解压', icon: '📦' },
  { name: '图片转换', icon: '🖼️' },
  { name: '文件上传', icon: '📤' }
];

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换选项卡
const switchTab = (index) => {
  currentTab.value = index;
};

// 显示状态信息
const showStatus = (type, message) => {
  statusType.value = type;
  statusMessage.value = message;
  setTimeout(() => {
    statusMessage.value = '';
  }, 3000);
};

// 选择文件
const selectFile = (type) => {
  uni.chooseFile({
    count: 1,
    type: type === 'image' ? 'image' : 'all',
    success: (res) => {
      const file = res.tempFiles[0];
      
      if (type === 'compress' || type === 'upload') {
        if (type === 'compress') {
          compressFileName.value = file.name;
        } else {
          uploadFileName.value = file.name;
          totalSize.value = file.size;
          uploadedSize.value = 0;
          uploadProgress.value = 0;
          chunkProgress.value = [];
          
          // 初始化分片进度
          const chunkSize = getChunkSizeInBytes(chunkSizes[chunkSizeIndex.value]);
          const chunks = Math.ceil(file.size / chunkSize);
          
          for (let i = 0; i < chunks; i++) {
            chunkProgress.value.push({
              index: i,
              progress: 0,
              status: 'pending'
            });
          }
        }
      } else if (type === 'image') {
        imageFileName.value = file.name;
        imagePreviewUrl.value = file.path;
      }
      
      showStatus('success', `已选择文件: ${file.name}`);
    },
    fail: (err) => {
      console.error('选择文件失败:', err);
      showStatus('error', '选择文件失败');
    }
  });
};

// 获取分片大小（字节）
const getChunkSizeInBytes = (sizeStr) => {
  const size = parseInt(sizeStr);
  if (sizeStr.includes('MB')) {
    return size * 1024 * 1024;
  } else if (sizeStr.includes('KB')) {
    return size * 1024;
  }
  return size;
};

// 压缩文件
const compressFile = async () => {
  if (!compressFileName.value) {
    showStatus('error', '请先选择文件');
    return;
  }
  
  try {
    isProcessing.value = true;
    showStatus('info', '正在压缩文件...');
    
    const result = await fileToolRef.value.compressFile(compressFileName.value, {
      format: compressFormats[compressFormatIndex.value],
      level: compressLevel.value
    });
    
    if (result.success) {
      processedFiles.value = fileToolRef.value.getProcessedFiles();
      showStatus('success', '文件压缩成功');
    } else {
      showStatus('error', result.error || '压缩文件失败');
    }
  } catch (error) {
    console.error('压缩文件失败:', error);
    showStatus('error', '压缩文件失败');
  } finally {
    isProcessing.value = false;
  }
};

// 解压文件
const extractFile = async () => {
  if (!compressFileName.value) {
    showStatus('error', '请先选择文件');
    return;
  }
  
  try {
    isProcessing.value = true;
    showStatus('info', '正在解压文件...');
    
    const result = await fileToolRef.value.extractFile(compressFileName.value);
    
    if (result.success) {
      processedFiles.value = fileToolRef.value.getProcessedFiles();
      showStatus('success', '文件解压成功');
    } else {
      showStatus('error', result.error || '解压文件失败');
    }
  } catch (error) {
    console.error('解压文件失败:', error);
    showStatus('error', '解压文件失败');
  } finally {
    isProcessing.value = false;
  }
};

// 转换图片
const convertImage = async () => {
  if (!imageFileName.value) {
    showStatus('error', '请先选择图片');
    return;
  }
  
  try {
    isProcessing.value = true;
    showStatus('info', '正在转换图片...');
    
    const result = await fileToolRef.value.convertImage(imageFileName.value, {
      format: imageFormats[imageFormatIndex.value],
      quality: imageQuality.value,
      autoCompatible: autoCompatible.value
    });
    
    if (result.success) {
      processedImages.value = fileToolRef.value.getProcessedImages();
      showStatus('success', '图片转换成功');
    } else {
      showStatus('error', result.error || '转换图片失败');
    }
  } catch (error) {
    console.error('转换图片失败:', error);
    showStatus('error', '转换图片失败');
  } finally {
    isProcessing.value = false;
  }
};

// 开始上传
const startUpload = async () => {
  if (!uploadFileName.value) {
    showStatus('error', '请先选择文件');
    return;
  }
  
  try {
    isUploading.value = true;
    isPaused.value = false;
    showStatus('info', '开始上传文件...');
    
    const result = await fileToolRef.value.uploadFile(uploadFileName.value, {
      chunkSize: getChunkSizeInBytes(chunkSizes[chunkSizeIndex.value]),
      concurrentUploads: concurrentUploads.value,
      resumeUpload: resumeUpload.value
    });
    
    if (result.success) {
      uploadedFiles.value = fileToolRef.value.getUploadedFiles();
      showStatus('success', '文件上传成功');
    } else {
      showStatus('error', result.error || '上传文件失败');
    }
  } catch (error) {
    console.error('上传文件失败:', error);
    showStatus('error', '上传文件失败');
  } finally {
    isUploading.value = false;
  }
};

// 暂停上传
const pauseUpload = () => {
  isPaused.value = !isPaused.value;
  showStatus('info', isPaused.value ? '上传已暂停' : '继续上传');
};

// 取消上传
const cancelUpload = () => {
  isUploading.value = false;
  isPaused.value = false;
  uploadProgress.value = 0;
  uploadedSize.value = 0;
  
  // 重置分片状态
  chunkProgress.value.forEach(chunk => {
    chunk.progress = 0;
    chunk.status = 'pending';
  });
  
  showStatus('info', '上传已取消');
};

// 打开文件
const openFile = (file) => {
  // #ifdef H5
  // H5环境下下载文件
  const link = document.createElement('a');
  link.href = file.path;
  link.download = file.name;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  // #endif
  
  // #ifndef H5
  // 非H5环境下使用uni.openDocument
  uni.openDocument({
    filePath: file.path,
    fileType: fileToolRef.value.getFileType(file.name),
    success: () => {
      console.log('打开文件成功');
    },
    fail: (err) => {
      console.error('打开文件失败:', err);
      showStatus('error', '打开文件失败');
    }
  });
  // #endif
};

// 分享文件
const shareFile = (file) => {
  uni.showToast({
    title: '分享文件: ' + file.name,
    icon: 'none'
  });
};

// 复制链接
const copyUrl = (file) => {
  uni.setClipboardData({
    data: file.url,
    success: () => {
      showStatus('success', '链接已复制到剪贴板');
    }
  });
};

// 删除文件
const deleteFile = (index) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个文件吗？',
    success: (res) => {
      if (res.confirm) {
        processedFiles.value.splice(index, 1);
        showStatus('success', '文件已删除');
      }
    }
  });
};

// 删除图片
const deleteImage = (index) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这张图片吗？',
    success: (res) => {
      if (res.confirm) {
        processedImages.value.splice(index, 1);
        showStatus('success', '图片已删除');
      }
    }
  });
};

// 删除上传文件
const deleteUploadedFile = (index) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个上传记录吗？',
    success: (res) => {
      if (res.confirm) {
        uploadedFiles.value.splice(index, 1);
        showStatus('success', '上传记录已删除');
      }
    }
  });
};

// 清空处理文件
const clearProcessedFiles = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有处理记录吗？',
    success: (res) => {
      if (res.confirm) {
        processedFiles.value = [];
        showStatus('success', '处理记录已清空');
      }
    }
  });
};

// 清空处理图片
const clearProcessedImages = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有图片转换记录吗？',
    success: (res) => {
      if (res.confirm) {
        processedImages.value = [];
        showStatus('success', '图片转换记录已清空');
      }
    }
  });
};

// 清空上传文件
const clearUploadedFiles = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有上传记录吗？',
    success: (res) => {
      if (res.confirm) {
        uploadedFiles.value = [];
        showStatus('success', '上传记录已清空');
      }
    }
  });
};

// 获取文件图标
const getFileIcon = (type) => {
  return fileToolRef.value.getFileType(type);
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  return fileToolRef.value.formatFileSize(bytes);
};

// 格式化日期
const formatDate = (date) => {
  return fileToolRef.value.formatDate(date);
};

// 事件处理函数
const onCompressFormatChange = (e) => {
  compressFormatIndex.value = e.detail.value;
};

const onCompressLevelChange = (e) => {
  compressLevel.value = e.detail.value;
};

const onImageFormatChange = (e) => {
  imageFormatIndex.value = e.detail.value;
};

const onImageQualityChange = (e) => {
  imageQuality.value = e.detail.value;
};

const onAutoCompatibleChange = (e) => {
  autoCompatible.value = e.detail.value;
};

const onChunkSizeChange = (e) => {
  chunkSizeIndex.value = e.detail.value;
};

const onConcurrentUploadsChange = (e) => {
  concurrentUploads.value = e.detail.value;
};

const onResumeUploadChange = (e) => {
  resumeUpload.value = e.detail.value;
};
</script>

<style lang="scss">

.component-section {
  margin-top: 108rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 108rpx 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tool-header {
  text-align: center;
  margin-bottom: 30px;
}

.tool-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  display: block;
  margin-bottom: 8px;
}

.tool-subtitle {
  font-size: 14px;
  color: #6c757d;
}

.tool-tabs {
  display: flex;
  justify-content: space-around;
  background: #ffffff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #007aff;
}

.tab-item.active .tab-icon,
.tab-item.active .tab-name {
  color: #ffffff;
}

.tab-icon {
  font-size: 24px;
  margin-bottom: 4px;
  color: #6c757d;
}

.tab-name {
  font-size: 14px;
  color: #6c757d;
}

.tool-content {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  animation: fadeIn 0.3s ease-out;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.title-icon {
  margin-right: 8px;
  font-size: 20px;
}

.file-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.select-btn {
  background: #007aff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.btn-icon {
  margin-right: 6px;
}

.file-name {
  font-size: 14px;
  color: #6c757d;
}

.option-item {
  margin-bottom: 20px;
}

.option-label {
  display: block;
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.picker-value {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #2c3e50;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:not(:disabled) {
  background: #007aff;
  color: #ffffff;
  border: none;
}

.action-btn:disabled {
  background: #e9ecef;
  color: #adb5bd;
  border: none;
}

.small-btn {
  padding: 8px 12px;
  font-size: 12px;
}

.delete-btn {
  background: #dc3545;
}

.file-list {
  margin-top: 30px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.list-clear {
  font-size: 14px;
  color: #6c757d;
}

.file-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.file-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.file-icon {
  font-size: 24px;
  margin-right: 12px;
}

.file-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-right: 12px;
}

.file-details {
  flex: 1;
}

.file-name {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 4px;
  display: block;
}

.file-meta, .file-type, .file-size, .file-date {
  font-size: 12px;
  color: #6c757d;
  margin-right: 8px;
}

.file-actions {
  display: flex;
  gap: 10px;
}

.upload-progress {
  margin: 20px 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #6c757d;
}

.usage-section {
  background: #ffffff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.usage-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usage-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.item-desc {
  font-size: 14px;
  color: #6c757d;
}

.code-section {
  background: #ffffff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.code-content {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.code-text {
  font-size: 14px;
  color: #2c3e50;
  display: block;
  margin-bottom: 8px;
}

.code-block {
  font-size: 14px;
  color: #2c3e50;
  display: block;
  font-family: monospace;
  line-height: 1.5;
}

/* 添加动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 添加交互反馈 */
.action-btn:active {
  transform: scale(0.98);
}

.tab-item:active {
  transform: scale(0.95);
}

/* 添加加载状态样式 */
.loading {
  position: relative;
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style> 